<template>
    <div class="layout">
        <el-container>
            <el-header class="header">
                <div class="logo">
                    LuffyBlog
                </div>
                <div class="user-info">
                    <span>欢迎回来,</span>
                    <el-dropdown>
                        <span class="nick-name">
                            {{ userInfo.nickName }}
                            <span class="iconfont icon-open"></span>

                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人信息</el-dropdown-item>
                                <el-dropdown-item>退出</el-dropdown-item>

                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <!-- <div class="avatar">
                        <img :src="userInfo.avatar" />
                    </div> -->

                </div>
            </el-header>
            <el-container class="container">
                <el-aside width="200px" class="left-aside">
                    <div>
                        <el-button class="post-btn">发布</el-button>
                    </div>
                    <div class="menu-panel">
                        <ul>
                            <li v-for="(menu, index) in menuList">
                                <span class="menu-title-p" @click="openClose(index)">


                                    <span :class="['iconfont', menu.icon]"> </span>
                                    <span class="menu-title">{{ menu.title }}</span>
                                    <span
                                        :class="['iconfont', 'open-close', menu.open ? 'icon-close' : 'icon-open']"></span>
                                </span>
                                <ul class="sub-menu" v-if=(menu.open)>
                                    <li v-for="subMenu in menu.children">
                                        <router-link :to="subMenu.path"
                                            :class="['sub-menu-item', activePath == subMenu.path ? 'active' : '']">
                                            {{ subMenu.title }}
                                        </router-link>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </el-aside>
                <el-main class="right-main">
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import VueCookies from 'vue-cookies';
import { useRouter, useRoute } from 'vue-router';

export default {
    data() {
        return {
            menuList: [
                {
                    title: "博客",
                    icon: "icon-blog",
                    open: true,
                    children: [
                        {
                            title: "博客管理",
                            path: "/blog/list",
                        },
                        {
                            title: "分类管理",
                            path: "/blog/category",
                        },
                    ]
                },
                {
                    title: "专题",
                    icon: "icon-zhuanti",
                    open: true,
                    children: [
                        {
                            title: "专题管理",
                            path: "/blog/special",
                        },
                    ]
                },
                {
                    title: "设置",
                    icon: "icon-settings",
                    open: true,
                    children: [
                        {
                            title: "个人信息设置",
                            path: "/setting/my/category",
                        },
                        {
                            title: "博客成员",
                            path: "/setting/user",
                        },
                        {
                            title: "系统设置",
                            path: "/setting/sysSetting",
                            roleType: 1,
                        }
                    ]
                },
                {
                    title: "回收站",
                    icon: "icon-delete",
                    open: true,
                    children: [
                        {
                            title: "回收站",
                            path: "/recovery/list",
                        },
                    ]
                },
            ],
            userInfo: {},
            activePath: null
        };
    },
    created() {
        this.init();
        this.$watch(
            () => this.$route.path,
            (newVal, oldVal) => {
                this.activePath = newVal;
                console.log(this.activePath);
            },
            { immediate: true }
        );
    },
    methods: {
        openClose(index) {
            const open = this.menuList[index].open;
            this.menuList[index].open = !open;
        },
        init() {
            this.userInfo = VueCookies.get("userInfo");
            this.userInfo.avatar = this.globalInfo.imageUrl + this.userInfo.avatar;
        }
    },
    components: {

    }
};

</script>
<style scoped>
.layout {
    .header {
        border-bottom: 1px solid;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .logo {
            font-size: 30px;
            ;
        }

        .user-info {
            display: flex;
            align-items: center;

            .nick-name {
                color: rgb(6, 143, 234);
                cursor: pointer;

                .icon-close {
                    font-size: 14px;
                }
            }

            .avatar {
                margin-left: 10px;
                width: 25x;

                img {
                    width: 100%;
                    border-radius: 50px;

                }

                ;
            }
        }
    }

    .container {
        background: #f5f6f7;
        height: calc(100vh - 60px);
        padding-top: 10px;

        .left-aside {
            width: 280px;
            padding: 0px 15px;

            .post-btn {
                background: green;
                color: white;
                height: 40px;
                width: 100%;
            }

            .menu-panel {
                margin-top: 5px;

            }

            .menu-panel ul,
            .menu-panel li {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            .menu-panel .menu-title {
                margin-left: 10px;
                flex: 1;
                color: #3f4042;
            }

            .menu-panel .menu-title-p {
                padding: 0px 5px;
                line-height: 50px;
                display: flex;
                cursor: pointer;

                .iconfont {
                    color: #91949a;
                    font-size: 20px;
                }

                .open-close {
                    width: 20px;
                    font-size: 16px;
                }
            }

            .menu-panel .menu-title-p:hover {
                background-color: #ddd;
            }

            .menu-panel .sub-menu {
                padding-left: 25px;
                font-size: 14px;

            }

            .menu-panel .sub-menu .sub-menu-item {
                padding: 0px 10px;
                display: block;
                line-height: 40px;
                cursor: pointer;
                text-decoration: none;
                color: #3f4042;
            }

            .menu-panel .sub-menu .active {
                background: #ddd;
                color: chocolate;
            }

            .menu-panel .sub-menu .sub-menu-item:hover {
                background: #ddd;
                color: chocolate;
            }

        }

        .right-main {
            position: relative;
            background: white;
            padding: 20px 10px 10px 10px;

        }
    }
}
</style>